<template>
    <!-- 二级设备列表 -->
    <div>
        <el-card>
            <!-- button -->
            <div>
                <el-button type="primary" @click="add">添 加</el-button>
            </div>
            <!-- 主体部分的表格 -->
            <el-table :data="tableData" style="width: 100%" :current-row-key="tableData.id">
                <el-table-column label="id">
                    <template slot-scope="slotProps">
                        {{slotProps.row.id}}
                    </template>
                </el-table-column>
                <el-table-column label="名称">
                    <template slot-scope="slotProps">
                        {{slotProps.row.name}}
                    </template>
                </el-table-column>
                <el-table-column label="是否外借">
                    <template slot-scope="slotProps">
                        {{slotProps.row.isLend?"否":"是"}}
                    </template>
                </el-table-column>
                <el-table-column label="是否上锁">
                    <template slot-scope="slotProps">
                        {{slotProps.row.isLock?"否":"是"}}
                    </template>
                </el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="slotProps">
                        <span v-if="slotProps.row.status === 0">禁用</span>
                        <span v-if="slotProps.row.status === 1">启用</span>
                        <span v-if="slotProps.row.status === 2">已删除</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="slotProps">
                        <el-button type="text" @click="edit(slotProps.$index)">编辑</el-button>
                        <el-button type="text" @click="del(slotProps.$index)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 删除的弹框 -->
            <el-dialog
                :title="dialog.del.title"
                :visible.sync="dialog.del.show"
                width="400px"
                center>
                <span>{{dialog.del.content}}</span>
                <span slot="footer">
                    <el-button @click="dialog.del.show = false">取 消</el-button>
                    <el-button type="primary" @click="delSure">删 除</el-button>
                </span>
            </el-dialog>
            <!-- 添加、编辑的弹框 -->
            <el-dialog
                :title="dialog.isEdit?'编辑':'添加'"
                :visible.sync="dialog.show"
                @close="handleDialogClose(`formData`)"
                width="700px"
                center>
                <el-form ref="formData" :rules="ruleForm" :model="formData" label-width="80px">
                    <el-form-item label="设备名称" prop="name">
                        <el-input placeholder="请输入设备名称" v-model="formData.name"></el-input>
                    </el-form-item>
                    <el-form-item label="是否借出" prop="isLend">
                        <el-select v-model="formData.isLend" placeholder="请选择--">
                            <el-option
                                v-for="(item, index) in options.isLend"
                                :key="index"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否上锁" prop="isLock">
                        <el-select v-model="formData.isLock" placeholder="请选择--">
                            <el-option
                                v-for="(item, index) in options.isLock"
                                :key="index"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="状态" prop="status">
                        <el-select v-model="formData.status" placeholder="请选择--">
                            <el-option
                                v-for="(item, index) in options.status"
                                :key="index"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <span slot="footer">
                    <el-button @click="dialog.show = false">取 消</el-button>
                    <el-button type="primary" @click="isEditSure(`formData`)">{{dialog.isEdit?"保存":"添加"}}</el-button>
                    <el-button @click="resetForm(`formData`)">重 置</el-button>
                </span>
            </el-dialog>
            <!-- 底部翻页器 -->
            <br>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next, jumper"
                    :pager-count="5"
                    :total="page.total"
                    :page-size="page.pageSize"
                    :current-page="page.currentPage"
                    @current-change="handleCurrentChange"
                >
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>
<script>
import request from '@/utils/request'
export default {
  data() {
    return {
      tableData: [],
      page: {
        total: 10,
        pageSize: 10,
        currentPage: 1
      },
      dialog: {
        show: false,
        title: '编辑',
        index: '',
        isEdit: false,
        currentIndex: '',
        del: {
          show: false,
          title: '提示',
          content: '您确定要删除当前设备吗？',
          currentId: ''
        }
      },
      formData: {
        primaryDeviceId: '',
        isLend: '',
        isLock: '',
        status: '',
        name: ''
      },
      options: {
        isLend: [{
          value: 0,
          label: '是'
        }, {
          value: 1,
          label: '否'
        }],
        isLock: [{
          value: 0,
          label: '是'
        }, {
          value: 1,
          label: '否'
        }],
        status: [{ // 状态只显示禁用/启用两种，由后台控制，已删除的设备不在显示
          value: 0,
          label: '禁用'
        }, {
          value: 1,
          label: '启用'
        }]
      },
      ruleForm: { // 表单验证
        name: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        isLend: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        isLock: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        status: [
          { required: true, message: '请选择', trigger: 'change' }
        ]
      }
    }
  },
  mounted() {
    this.getList(this.$route.params.id)
  },
  methods: {
    // 翻页器
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.getList(this.$route.params.id)
    },
    // 初始化列表
    getList(currentId) {
      request.get('/items/deviceSecondary/page', { params: {
        size: this.page.pageSize,
        current: this.page.currentPage,
        id: currentId
      }}).then(res => {
        console.log('描述：', res)
        this.tableData = res.content.records
        this.page.total = res.content.total
      })
    },
    // 删除
    del(index) {
      this.dialog.del.show = true
      this.dialog.del.currentId = this.tableData[index].id
    },
    delSure() {
      request.delete(`/items/deviceSecondary/${this.dialog.del.currentId}`).then(res => {
        if (res.code === 0) {
          this.getList(this.$route.params.id)
        } else {
          this.$message.error(res.content)
        }
        this.dialog.del.show = false
      })
    },
    // 添加
    add() {
      this.dialog.isEdit = false
      this.dialog.show = true
      this.formData = {}
      this.formData.primaryDeviceId = this.$route.params.id
    },
    // 编辑
    edit(index) {
      this.dialog.isEdit = true
      this.dialog.show = true
      this.dialog.currentIndex = index
      const { name, isLend, isLock, status } = { ...this.tableData[index] }
      this.formData.name = name
      this.formData.isLend = isLend
      this.formData.isLock = isLock
      this.formData.status = status
      this.formData.primaryDeviceId = this.$route.params.id
    },
    // 点击弹出框内的保存or添加按钮
    isEditSure(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (!this.dialog.isEdit) { // 添加操作
            request.post('/items/deviceSecondary/add', {
              ...this.formData
            }).then(res => {
              if (res.code === 0) {
                this.getList(this.$route.params.id)
              } else {
                this.$message.error(res.content)
              }
            })
          } else { // 编辑操作
            request.put('/items/deviceSecondary/update', {
              id: this.tableData[this.dialog.currentIndex].id,
              ...this.formData
            }).then(res => {
              if (res.code === 0) {
                this.getList(this.$route.params.id)
              } else {
                this.$message.error(res.content)
              }
            })
          }
          this.dialog.show = false // 操作之后，弹框消失
        }
      })
    },
    // Dialog关闭的回调close
    handleDialogClose(formName) {
      this.resetForm(formName)
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style scoped>
.pagination {
  float: right;
  margin-bottom: 15px;
}
</style>
